<template>
  <!-- 预约到店 -->
  <view class="container">
    <u-toast ref="uToast" />
    <view class="shophead">
      <view class="shboxs">
        <view class="shcss flex flex-jc-sb">
          <view class="stitle">
            {{shoplist.storeName}}
          </view>
          <view class="gehshop" @click="gehClick">
            <i-icon icon="iconshuaxin" type="single" size="20rpx" color="#333333" style="margin-right: 10rpx;"></i-icon>
            更换门店
          </view>
        </view>
        <view class="address">
          <i-icon icon="iconzuobiao" type="single" size="20rpx" color="#FFE23E" style="margin-right: 10rpx;"></i-icon>
          {{shoplist.address}}
        </view>
        <view class="address">
          <i-icon icon="iconzuobiao" type="single" size="20rpx" color="#FFE23E" style="margin-right: 10rpx;"></i-icon>
          距你{{shoplist.distance}}
        </view>
      </view>

      <view class="yuyuaestop flex flex-jc-sa">
        <view class="yifuwu flex flex-ai-c" @click="mobile()">
          <view class="iconsss">
            <i-icon icon="icondianhua" type="single" size="24rpx" color="#3D3D3D"></i-icon>
          </view>
          已服务{{sAmount}}万人
        </view>
        <view class="jili flex flex-ai-c">
          <view class="iconsss" @click="onClickNavigation()">
            <i-icon icon="icondaohang" type="single" size="24rpx" color="#3D3D3D"></i-icon>
          </view>
          距你{{shoplist.distance}}
        </view>
      </view>
    </view>
    <view class="yuyuexx">
      <view class="programme flex flex-ai-c">
        <view class="hkuai"></view>
        <view class="1234">
          预约信息
        </view>
      </view>
      <view class="zhixcss flex">
        <view class="zhixname">
          意向车型
        </view>
        <view class="zhixcz">
          {{carname}}
        </view>
      </view>
      <view class="zhixcss flex">
        <view class="zhixname">
          车辆颜色
        </view>
        <view class="zhixcz flex">
          <view class="mobile" @click="colorClick">
            <view class="kuang1 flex" v-show="modifycolor !== '不限'">
              <view class="kuang2">
                <view class="colorboxsss">
                  <view class="white" :style="{background:xedColorList.outerColour.colorCoding}"></view>
                  <view class="kuangtext">
                    外观
                    <!-- {{xedColorList.outerColour.color}} -->
                  </view>
                </view>
                /
                <view class="colorboxsss">
                  <view class="kuangtext">
                    内饰
                    <!-- {{xedColorList.inColour.color}} -->
                  </view>
                  <view class="kuang21 ml-10" v-if="xedColorList.inColour.neiColor.length == 1">
                    <view class="white1" :style="{background:xedColorList.inColour.neiColor[0]}"></view>
                  </view>
                  <view class="kuangdoubu ml-10" v-if="xedColorList.inColour.neiColor.length == 2">
                    <view class="white4" style="border-radius: 10rpx 10rpx 0rpx 0rpx;" :style="{background:xedColorList.inColour.neiColor[0]}"></view>
                    <view class="white4" style="border-radius: 0rpx 0rpx 10rpx 10rpx;" :style="{background:xedColorList.inColour.neiColor[1]}"></view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="mobbtn" v-show="modifycolor=== '不限'">
            {{modifycolor}}
          </view>
        </view>
      </view>
      <view class="zhixcss flex">
        <view class="zhixname">
          预约电话
        </view>
        <view class="zhixcz flex">
          <view class="mobile" v-if="modify === '修改'">
            <input class="uni-input uni-input-password" type="number" disabled="disabled" v-model="mobiles" maxlength="11"
              minlength="11" />
          </view>
          <view class="mobile" v-else>
            <input class="uni-input uni-input-password" type="number" v-model="mobiles" maxlength="11" minlength="11" /><!-- @input="clearInput" -->
            <view class="dele-icon" v-if="modify !== '修改'" @click="clearIcon">
              <i-icon icon="iconshanchu" type="single" size="34rpx" color="#e1e1e1"></i-icon>
            </view>
          </view>
          <view class="mobbtn" @click="wancheclick">
            {{modify}}
          </view>
        </view>
      </view>
      <view class="zhixcss flex">
        <view class="zhixname">
          预约日期
        </view>
        <view class="zhixczs flex">
          <view class="mobile">
            <picker mode="multiSelector" @change="yuyebtnclick" @cancel="quxiaobtn" :value="multiIndex" :range="multiArray">
              <view class="widthd">
                <view class="flex flex-ai-c flex-jc-sb">
                  <view class="datatimes">{{ymdatatime}}</view>
                  <view class="mobbtn" @click="dakaibtn()">
                    修改
                  </view>
                </view>
              </view>
            </picker>
          </view>
          <!-- <view class="mobbtn" @click="dakaibtn()">
            修改
          </view> -->
        </view>
      </view>
    </view>
    <view class="queryy" @click="qurclickbtn">
      <view class="qurbtn">
        确认预约
      </view>
    </view>
    <!-- 颜色弹框-->
    <u-popup v-model="colorpopup" mode="bottom" border-radius="30">
      <view class="hgzbox" style="height: 600rpx;">
        <view class="hgztitle flex">
          <view class="toubus">
            <view class="titname">选择配色</view>
          </view>
          <view class="iconcss" @tap="colorpopup = false">
            <u-icon name="close" color="#999999" size="30rpx"></u-icon>
          </view>
        </view>
        <view class="colorsboxs flex">
          <view class="colotext">
            外观
          </view>
          <view class="colorlists flex flex-wrap-w">
            <view class="flex flex-jc-c flex-ai-c" :class="item.chekd?'clrboxxzhong':'clrbox' " v-for="(item, index) in wgColorList"
              :key="index" @click="wgcolorClick(item,index)">
              <view class="whitess" :style="{background:item.colorCoding}"></view>
              <view class="colorname">
                {{item.color}}
              </view>
            </view>
          </view>
        </view>
        <view class="colorsboxs flex">
          <view class="colotext">
            内饰
          </view>
          <view class="colorlists flex flex-wrap-w">
            <view class="flex flex-jc-c flex-ai-c" :class="item.chekd?'clrboxxzhong':'clrbox'" v-for="(item, index) in nsColorList"
              :key="index" @click="nsColorClick(item,index)">
              <view class="kuang21" v-if="item.neiColor.length == 1">
                <view class="whitess" :style="{background:item.neiColor[0]}"></view>
              </view>
              <view class="kuangdoubu" v-if="item.neiColor.length == 2">
                <view class="white4" style="border-radius: 10rpx 10rpx 0rpx 0rpx;" :style="{background:item.neiColor[0]}"></view>
                <view class="white4" style="border-radius: 0rpx 0rpx 10rpx 10rpx;" :style="{background:item.neiColor[1]}"></view>
              </view>
              <view class="colorname">
                {{item.color}}
              </view>
            </view>
          </view>
        </view>

      </view>
    </u-popup>

    <!-- 免责弹窗 -->
    <view class="uni-popup" v-if="showPopup">
      <view class="main">
        <view class="neirong">
          <image src="https://files.yzsheng.com/client/commodity/yuyuechenggong@2x.png"></image>
        </view>
        <view class="popup-footer flex flex-jc-c">
          <view class="jkhjkh" @tap="agreepopup">确认</view>
        </view>
        <view class="kongde" @click="guanbianniu">

        </view>
      </view>
    </view>
  </view>
</template>

<script src="./reservationShop.js"></script>
<style scoped lang="scss">
  @import './reservationShop.scss';
</style>
